<template>
  <section class="hcp">
    <section class="left">
      <span>{{ content }}</span>
    </section>
    <section class="right"><slot></slot></section>
  </section>
</template>
<script setup lang="ts">
defineProps<{
  content: string
}>()
</script>
<style scoped>
.hcp {
  display: flex;
  color: white;
  font-size: 14px;
  height: 100%;
}

.left {
  width: 42px;
  background: linear-gradient(180deg, rgba(19, 148, 177, 1) 0%, rgba(19, 148, 148, 0.22) 100%);
  border-radius: 5px 0 0 5px;
  font-family: 'Roboto';
  font-size: 14px;
  padding-left: 12px;
  padding-right: 5px;
  padding-top: 5%;
}

.right {
  width: 100%;
  border: 1px solid rgba(19, 148, 148, 0.22);
  border-left: none;
  display: flex;
  justify-content: space-between;
  padding: 1% 5% 0 5%;
}
</style>
